import { ErrorBlock } from 'antd-mobile'
import warningImg from '@/mobile/assets/warning.png'

export function NoQywxNotice({ marginTop }: { marginTop?: string }) {
  return <ErrorBlock
    css={[{ '--margin-top': marginTop }, style]}
    image={<img src={warningImg} />}
    title="尚未登录企业微信"
    description={
      <div>
        请在企微沟通中台（聚合聊天）登录企业微信
        <br />
        以便展示相关数据
      </div>
    }
  />
}

const style = css`
  --image-height: 180px;
  margin-top: var(--margin-top);
  .adm-error-block-description {
    margin-top: 0;
  }
  .adm-error-block-description-title {
    color: #000;
    font-weight: 500;
    font-size: 17px;
  }
  .adm-error-block-description-subtitle {
    color: #aaa;
    line-height: 1.6;
    margin-top: 10px;
  }
`
